致胜优势INFO
联系我们CONTACT

公司地址:茂名市人民南路新村大院22号101

电话:13592986386

VUE 的一些常用外部组件学习日志您当前的位置:首页 > VUE 的一些常用外部组件学习日志

VUE 的一些常用外部组件学习日志

发布时间:2024/9/5 15:52:50


echarts  采用画图


Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。
Vue 只关注视图层, 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue 学习起来非常简单,本教程基于 Vue 2.1.8 版本测试,Vue3 请参阅 Vue3 教程。
<div id="app">
    <p v-if="seen">现在你看到我了</p>
    <template v-if="ok">
      <h1>菜鸟教程</h1>
      <p>学的不仅是技术,更是梦想!</p>
      <p>哈哈哈,打字辛苦啊!!!</p>
    </template>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    seen: true,
    ok: true
  }
})
</script>






<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>


 GoJS 图形实例
GoJS是一个用于创建交互式可视化图表和图形的JavaScript库。它提供了丰富的功能和工具,使开发人员能够轻松地构建各种类型的图表,包括流程图、组织结构图、网络拓扑图等。GoJS具有灵活的布局和样式设置,可以通过简单的API来实现图表的创建和操作。




vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。
vue的单页面应用是基于路由和组件的,路由用于设定访问路径
router.map({
'/home': { component: Home },
'/about': { component: About }
})




SweetAlert2是一款功能强大的纯Js模态消息对话框插件。SweetAlert2用于替代浏览器默认的弹出对话框,它提供各种参数和方法,支持嵌入图片,背景,HTML标签等,SweetAlert2是SweetAlert-js的升级版本,它解决了SweetAlert-js中不能嵌入HTML标签的问题,并对弹出对话框进行了优化,同时提供对各种表单元素的支持,还增加了5种情景模式的模态对话框,功能非常强大
 Swal('hello world')


swal({
            title: '提示',
            text: "早上好",
            confirmButtonText: '确认',
            confirmButtonColor: 'Green',
        })


 swal({
            title: '确定?',
            text: '您将无法恢复此文件!',
            type: '警告',
            showCancelButton: true,
            confirmButtonText: '确定,删除',
            cancelButtonText: '取消',
        }).then(function(isConfirm) {
            if (isConfirm.value) {
                swal(
                        '已删除!',
                        '文件已删除',
                        'success'
                );
            }
        });